<template>
    <div class="bind-manager">
      <div class="setting" v-show="!canvasPreImgUrl">
        <div class="left-tree">
            <treeFilter :list="treeList"></treeFilter>
        </div>
        <div class="right-box">
            <navHeader 
              @creRecthandle="createRect"
              @addBackImg="addBackImgHandle" 
              @addCircleHandle="addCircleHandle"
              @addLXHandle="addLXHandle"
              @addTriangleHandle="addTriangleHandle"
              @addMoreStyleHandle="addMoreStyleHandle"
              @previewHandle="previewHandle"
              @saveHandle="saveHandle"
            />
            <div class="box-container">
                <div class="container-left" ref="containerLeft">
                    <canvas id="canvasBox" ></canvas>
                </div> 
                <div class="container-right"></div>
            </div>
        </div>
      </div>
      <div class="preview" v-show="canvasPreImgUrl">
        <el-button type="primary" @click="logPreviewHandle" class="preBtn">退出预览</el-button>
        <img :src="canvasPreImgUrl" alt="">
      </div>
    </div>
</template>
<script setup>
import treeFilter from './components/treeFilter/index.vue'
import navHeader from './components/navHeader/index.vue'
import { ref, onMounted } from 'vue'
import spiderVerse from '@/assets/images/gwen-spider-verse-ah.jpg'
import MyCanvas from './fabric'
const treeList = ref([])
let myCanvaCla = null;
let canvasPreImgUrl = ref('')
const containerLeft = ref(null)
const initTree = () => {
    for (let index = 0; index < 4; index++) {
        treeList.value.push({
            label: `数据${index}`,
            value: index,
            children: [{ label: `孩子${index}`, value: index + 1 }]
        })
    }
}
const initCavas = () => {
   let width = containerLeft.value.clientWidth
   let height = containerLeft.value.clientHeight
   myCanvaCla = new MyCanvas('canvasBox',{width,height})
}
// 创建矩形
const createRect = () => myCanvaCla.createRect({width:150,height:60})
// 创建圆形
const addCircleHandle = () => myCanvaCla.createCircle({radius:50})
// 创建菱形
const addLXHandle = () => myCanvaCla.createLX()
// 给canvas添加底图
const addBackImgHandle = () => myCanvaCla.addBackImgHandle(spiderVerse)
// 创建三角形
const addTriangleHandle = () => myCanvaCla.createTrangle()
// 预览
const previewHandle = () => canvasPreImgUrl.value = myCanvaCla.preview();
// 退出预览
const logPreviewHandle = () => canvasPreImgUrl.value = '';
// 保存
const saveHandle = () => {
    console.log(myCanvaCla.toJson())
    console.log(myCanvaCla.toObj())
}
onMounted(() => {
    initTree()
    initCavas()
})
</script>

<style scoped lang="scss">
.bind-manager {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #E6E8F2;
    .setting {
        display: flex;
        width: 100%;
        height: 100%;
        .left-tree {
        margin-right: 15px;
        height: 100%;
        border-radius: 10px;
        background-color: #ffffff;
    }

    .right-box {
        display: flex;
        flex-direction: column;
        flex: 1;

        .box-container {
            display: flex;
            height: calc(100% - 80px);

            .container-left {
                flex: 1;
                margin-right: 10px;
                background-color: #ffffff;
            }

            .container-right {
                width: 350px;
                height: 100%;
                background-color: #ffffff;
            }
        }
    }
    }
    .preview {
        position: relative;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
        .preBtn {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    }
}
</style>